<template>
<div class="coupon-client-old views-container">
    <div class="flex-row flex-justify-b">
        <div class="wlm-form" style="flex-grow: 1;margin-right: 20px;">
            <div class="wlm-form-header">老客进店有礼</div>
            <div class="wlm-form-content table-content">
                <el-form ref="orther" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="180px" class="retail-form" label-position="right">
                    <el-form-item label="活动名称">
                        <el-input v-model="formFormatData.formData.voucher_title" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-date-picker style="width:360px;" :picker-options="afterOptions" v-model="formFormatData.formData.voucher_time" :default-time="[`${`${new Date().getHours()}`.padStart(2,'0')}:${`${new Date().getMinutes()+2}`.padStart(2,'0')}:00`,'23:59:59']" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="发券频率">
                        <div class="flex-row min-number">
                            <span>每</span>
                            <el-input-number style="margin:0 10px;" v-model="formFormatData.formData.voucher_rate" controls-position="right" :min="1" :max="30"></el-input-number>
                            <span>天首次进店发券</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="优惠券">
                        <el-button type="primary" @click="couponToogle" style="display: block;margin: 12px 0;">添加优惠券</el-button>
                        <p class="form-help">可以添加最多五个优惠券</p>
                        <choose-coupon ref="chooseCoupon" :config="chooseCouponConfig" :changeEvt="filtersCouponChange"></choose-coupon>
                        <el-table class="coupon-table" v-show="formFormatData.formData.coupon!=''" :data="formFormatData.formData.coupon" style="width: 100%;margin-top:20px;">
                            <el-table-column prop="date" label="优惠券名称">
                                <template slot-scope="scope">
                                    <p>{{scope.row.name}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="优惠券内容">
                                <template slot-scope="scope">
                                    <couponRender>
                                        <template slot="title" v-if="scope.row.coupon_type">
                                            {{`${scope.row.rule === 0 ? `${coupon_price[`${scope.row.coupon_type}`]['textRule']}${scope.row.rule_min_money}元`:''} ${coupon_price[`${scope.row.coupon_type}`]['textPrev']}`}}
                                        </template>
                                        <template slot="price">
                                            {{scope.row.coupon_type === 40 ? `${scope.row.min} - ${scope.row.max}` : scope.row.coupon_type === 20 ? scope.row.discount : scope.row.reduce_price}}
                                        </template>
                                        <template slot="tail" v-if="scope.row.coupon_type">
                                            {{coupon_price[`${scope.row.coupon_type}`]['textLast']}}
                                        </template>
                                    </couponRender>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="赠券数(每一个用户可获得的优惠券个数)" min-width="120">
                                <template slot-scope="scope">
                                    <el-input-number style="margin-right:20px;" @change="oldGiftChange(scope.row,'coupon_number')" v-model="scope.row.coupon_number" controls-position="right" :min="1"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="获得条件" min-width="70">
                                <template slot-scope="scope">
                                    <el-select style="width:120px" size="small" v-model="scope.row.voucher_coupon_term" placeholder="请选择">
                                        <el-option label="进店即得" :value="1">
                                        </el-option>
                                        <el-option label="支付后得" :value="2">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" >
                                <template slot-scope="scope">
                                    <div class="operation-group">
                                        <el-button class="wlm-text" type="text" @click="toggleSelection(scope)">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="wlm-form" style="width:300px">
            <div class="wlm-form-header">老客进店有礼预览</div>
            <div class="wlm-form-content table-content">
                <img style="width:100%"  src="@/assets/couponClient/preview.png" alt="">
        </div>
            </div>
        </div>
        <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/couponClient', code: 1 }})" type="primary" :loading="loading">立即发券</el-button>
            <router-link tag="span" to="/application/couponClient">
                <el-button size="small">返回</el-button>
            </router-link>
        </div>
    </div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import ChooseCoupon from '@/components/ChooseCoupon/index'
import Sortable from 'sortablejs'
import {
  voucherDetail,
  voucherAddEdit
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'CouponClientOld',
  components: {
    ChooseFiles,
    ChooseCoupon,
    couponRender: {
      template: '<span><slot name="title"></slot><span class="text-danger"><slot name="price"></slot></span><slot name="tail"></slot></span>'
    }
  },
  computed: {
  },
  created() {
  },
  data() {
    return {
      loading:false,
      coupon_type: {
        10: '满减券',
        20: '折扣券',
        30: '运费券',
        40: '随机券'
      },
      coupon_price: {
        10: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        20: {
          textRule: '满',
          textPrev: '打',
          textLast: '折'
        },
        30: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        40: {
          textRule: '满',
          textPrev: '范围内随机',
          textLast: '元'
        }
      },
      diyList: [],
      saveCustomDataList: [],
      newCouponList: [],
      oldCouponList: [],
      dialogUrl: 1,
      currentRow: [],
      chooseCouponConfig: {
        type: ['chooseCoupon'],
        model: 'display',
        get_limit_type: 0,
        disabled: [{
          label: 'status',
          value: 1,
          reverse: true
        },
        {
          label: 'get_limit_type',
          value: 1
        }, {
          label: 'coupon_type',
          value: 40
        }],
        initList: []
      },
      formFormatData: {
        key: ['orther'],
        api: {
          editForm: {
            api: voucherDetail,
            params: {
              id: ''
            },
            redirect: 'voucher_id'
          },
          submitForm: voucherAddEdit
        },
        formData: {
          voucher_time: [],
          voucher_title: '',
          voucher_rate: '',
          voucher_type: '2',
          coupon: []
        },
        rules: {}
      }
    }
  },
  mounted() {

  },
  methods: {
    oldGiftChange(params, key) {
      this.$nextTick(() => {
        params[key] = String(params[key]).replace(/[^\d]/g, '')
      })
    },
    goodsCouponGrag() {
      // newCouponList:[],
      // oldCouponList:[],
      this.oldCouponList = this.formFormatData.formData.coupon.map(v => v.coupon_id)
      this.newCouponList = this.oldCouponList.slice()
      this.$nextTick(() => {
        this.setSortCopon()
      })
    },
    setSortCopon() {
      const el = document.querySelectorAll('.coupon-table .el-table__body-wrapper > table > tbody')[0]
      console.log(el, 'el')
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.formFormatData.formData.coupon.splice(evt.oldIndex, 1)[0]
          this.formFormatData.formData.coupon.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newCouponList.splice(evt.oldIndex, 1)[0]
          this.newCouponList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    },
    filtersCouponChange(arg) {
      const { displayData } = arg
      // this.couponCurrentRow = currentRow
      console.log(displayData, 'display')
      displayData.map(item => {
        var hasIndex = this.formFormatData.formData.coupon.findIndex(tableitem => { return `${tableitem.coupon_id}` === `${item.coupon_id}` })
        if (hasIndex === -1 && this.formFormatData.formData.coupon.length < 5) {
          this.formFormatData.formData.coupon.push({ coupon_id: item.coupon_id, name: item.name, coupon_type: item.coupon_type, rule: item.rule, coupon_price: item.coupon_price, rule_min_money: item.rule_min_money, min: item.min, max: item.max, discount: item.discount, reduce_price: item.reduce_price })
        }
      })
      // this.formFormatData.formData.coupon = this.formFormatData.formData.coupon.slice(-5)
    },
    couponToogle() {
      // this.$refs.chooseCoupon.currentRow = this.couponCurrentRow
      this.$refs.chooseCoupon.toggle()
    },
    toggleSelection(scope) {
      this.formFormatData.formData.coupon.splice(scope.$index, 1)
      console.log(this.$refs.chooseCoupon.currentRow)

      this.currentRow.splice(scope.$index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-client-old {

    /deep/ .coupon-table .el-input,
    /deep/ .coupon-table .el-input-number {
        width: 170px;
    }
    /deep/ .min-number .el-input,
    /deep/ .min-number .el-input-number {
        width: 90px;
    }

    .table-raido-header {
        background: #f2f2f2;
        padding: 10px;
        font-weight: 700;
        color: #909399;
    }

    .table-raido-body {
        padding: 10px;
        line-height: 24px;
        border-bottom: 1px solid rgb(235, 238, 245);
    }

    .table-left {
        width: 15%;
    }

    .table-mid {
        width: 34%;
        margin-right: 20px;
    }

    .table-right {
        width: 49%;
    }

    /deep/ .sortable-ghost {
        opacity: .8;
        color: #fff !important;
        background: #79bbff !important;
    }

    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }
}
</style>
